<template>
	<div>
		<view class="content" v-if="!errText">
			<view class="home">
				<image src="../../static/bg.png" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<view class="home-text">
					<view>{{name}}</view>
					<view style="margin-top: 10rpx;">{{code}}</view>
					<div style="display: flex;align-items: center;font-size: 27rpx;font-weight: 400;margin-top: 15rpx;">
						<view v-if="bxr">核销人：{{bxr}}</view>
						<view v-if="typeName" style="margin-left: 25rpx;">核销类型：{{typeName}}</view>
					</div>
				</view>
			</view>
			<image src="../../static/duplicateCheck.png" class="home-img" @click="openQrcode"></image>
			<div
				style="display: flex;align-items: center;font-size: 35rpx;color: #333333;margin-top: 20rpx;margin-bottom: 80rpx;">
				<view>本次共核销发票</view>
				<view style="font-weight: 600;font-size: 58rpx;color: #FF411F;margin: 0 20rpx;">{{num}}</view>
				<view>张</view>
			</div>
			<div v-if="status === 3 || status === 4"
				style="display: flex;align-items: center;font-size: 27rpx;font-weight: 400;color: #999999;margin-bottom: 15rpx;">
				<view v-if="bxr">核销日期：{{nowData}}</view>
				<view style="margin-left: 55rpx;">核销人：{{bxr}}</view>
			</div>
			<view style="display: flex;align-items: center;" v-if="status === 1">
				<image src="../../static/wait.png" style="width: 46rpx;height: 46rpx;display: block;"></image>
				<view style="color: #24D59C;font-weight: 500;font-size: 46rpx;margin-left: 10rpx;line-height: 1;">等待扫描发票
				</view>
			</view>
			<view style="display: flex;align-items: center;" v-if="status === 2">
				<image src="../../static/wait.png" style="width: 46rpx;height: 46rpx;"></image>
				<view style="color: #24D59C;font-weight: 500;font-size: 46rpx;margin-left: 10rpx;line-height: 1;">发票核销中
				</view>
			</view>
			<view style="display: flex;align-items: center;" v-if="status === 3">
				<image src="../../static/success.png" style="width: 46rpx;height: 46rpx;"></image>
				<view style="color: #24D59C;font-weight: 500;font-size: 46rpx;margin-left: 10rpx;line-height: 1;">成功核销
				</view>
			</view>
			<view style="display: flex;align-items: center;" v-if="status === 4">
				<image src="../../static/warn.png" style="width: 46rpx;height: 46rpx;"></image>
				<view style="color: #FF2916;font-weight: 500;font-size: 46rpx;margin-left: 10rpx;line-height: 1;">
					警惕！该发票已核销过！</view>
			</view>
			<view style="font-size: 27rpx;color: #999999;margin-top: 100rpx;">{{text}}</view>
			<!-- <u-toast ref="uToast"></u-toast> -->
		</view>
		<view v-else>
			{{errText}}
		</view>
	</div>

</template>

<script>
	// import {
	// 	Html5Qrcode
	// } from 'html5-qrcode';
	import wx from 'weixin-js-sdk';
	import {
		searchApi,
		wxConfig
	} from "@/apis/user"
	import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
	export default {
		data() {
			return {
				status: 1,
				text: '点击【收据报销查重】开始核销发票',
				html5Qrcode: null,
				isScaning: false,
				token: '',
				name: '',
				code: '',
				bxr: '',
				bxlx: '',
				typeName: '',
				errText: '',
				num: 0,
				mc2Type: '',
				nowData: '',
			}
		},
		async onLoad(option) {
			this.nowData = this.GetDateStr(0)
			console.log(option);
			this.token = option.token
			uni.setStorageSync('token', this.token)
			this.name = option.name
			this.code = option.code
			this.bxr = option.bxr
			this.bxlx = option.bxlx
			this.mc2Type = option.mc
			this.typeName = option.typeName
			this.deptId = option.deptId
			if (!this.code) {
				this.errText = '请扫描二维码进入'
				return
			}
			if (!this.bxr) {
				this.errText = '请选择报销人后扫码'
				return
			}
			if (!this.bxlx) {
				this.errText = '请选择报销类型后扫码'
				return
			}
			const ua = window.navigator.userAgent.toLowerCase();
			console.log(ua.match(/micromessenger/i));
			if (ua.match(/micromessenger/i) == 'micromessenger') {
				await this.getCofig();
			} else {
				this.errText = '请使用微信网页浏览器打开'
			}


		},
		onShow() {

		},
		methods: {
			GetDateStr(AddDayCount) {
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
				var y = dd.getFullYear();
				var m = ('0' + (dd.getMonth() + 1)).slice(-2); //获取当前月份的日期
				var d = ('0' + dd.getDate()).slice(-2);
				return y + "年" + m + "月" + d + "日"
			},
			async getCofig() {
				const url = location.href.split('#')[0];
				console.log(url);
				const res = await wxConfig({
					url
				})
				console.log(res);
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: Number(res.data.timestamp), // 必填，生成签名的时间戳
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					signature: res.data.signature, // 必填，签名
					jsApiList: ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表
				})
				wx.ready(() => {
					wx.checkJsApi({
						jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {

						}
					});
				})
				wx.error(function(res) {
					alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				});
			},
			// openQrcode() {
			// 	this.isScaning = true;
			// 	Html5Qrcode.getCameras().then((devices) => {
			// 		if (devices && devices.length) {
			// 			this.html5Qrcode = new Html5Qrcode('reader');
			// 			this.html5Qrcode.start({
			// 					facingMode: 'environment'
			// 				}, {
			// 					focusMode: 'continuous', //设置连续聚焦模式
			// 					fps: 5, //设置扫码识别速度
			// 					qrbox: 280 //设置二维码扫描框大小
			// 				},
			// 				(decodeText, decodeResult) => {
			// 					if (decodeText) { //这里decodeText就是通过扫描二维码得到的内容
			// 						console.log(decodeText.split(','));
			// 						if (decodeText) {
			// 							this.stopScan();
			// 							let fphm
			// 							let hjje
			// 							let fpdm = ''
			// 							let jym = ''
			// 							let kprq = ''
			// 							let type = "02"
			// 							if (decodeText.split(',')[2] === "") {
			// 								fphm = decodeText.split(',')[3]
			// 								hjje = decodeText.split(',')[4]
			// 								kprq = decodeText.split(',')[5]
			// 							} else {
			// 								kprq = decodeText.split(',')[5]
			// 								fpdm = decodeText.split(',')[2]
			// 								fphm = decodeText.split(',')[3]
			// 								hjje = decodeText.split(',')[4]
			// 								jym = decodeText.split(',')[6]
			// 								type = '01'
			// 							}

			// 							console.log(fphm);
			// 							this.goDetai(fphm, hjje, fpdm, jym, kprq, type)
			// 							console.log(222);
			// 						}
			// 						// this.action(decodeText) //对二维码逻辑处理
			// 						// this.stopScan(); //关闭扫码功能
			// 					}
			// 				},
			// 				(err) => {
			// 					// uni.showToast({
			// 					// 	title: err,
			// 					// 	icon: 'none',
			// 					// 	duration: 10000
			// 					// })
			// 					// console.log(err);  //错误信息
			// 				}
			// 			);
			// 		}
			// 	});
			// },
			openQrcode() {
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: (res) => {
						console.log('扫码成功', res);
						const decodeText = res.resultStr;
						if (decodeText) {
							let fphm
							let hjje
							let fpdm = ''
							let jym = ''
							let kprq = ''
							let type = "02"
							if (decodeText.split(',')[2] === "" || decodeText.split(",")[2] === " ") {
								fphm = decodeText.split(',')[3]
								hjje = decodeText.split(',')[4]
								kprq = decodeText.split(',')[5]
							} else {
								kprq = decodeText.split(',')[5]
								fpdm = decodeText.split(',')[2]
								fphm = decodeText.split(',')[3]
								hjje = decodeText.split(',')[4]
								jym = decodeText.split(',')[6]
								type = '01'
							}

							console.log(fphm);
							this.goDetai(fphm, hjje, fpdm, jym, kprq, type)
							console.log(222);
						}
					}
				});
			},
			// stopScan() {
			// 	console.log('停止扫码')
			// 	this.isScaning = false;
			// 	if (this.html5Qrcode) {
			// 		this.html5Qrcode.stop();
			// 	}
			// },
			async goDetai(fphm, hjje, fpdm, jym, kprq, type) {
				try {
					uni.showLoading({
						title: '核销中...',
						mask: true,
					})
					this.status = 2
					const res = await searchApi({
						type,
						kprq,
						jym,
						fpdm,
						fphm,
						hjje,
						bxlx: this.bxlx,
						bxr: this.bxr,
						mc2Type: this.mc2Type,
						deptId: this.deptId,
					})
					uni.hideLoading()
					// this.$refs.uToast.show({
					// 	type: 'success',
					// 	message: "成功报销",
					// })
					this.status = 3
					this.text = `最近核销：${fphm}`
					this.num++

				} catch (e) {
					console.log(e);
					uni.hideLoading()
					this.status = 4
					this.text = `最近核销：${fphm}`
					// this.$refs.uToast.show({
					// 	type: 'error',
					// 	message: e.data.msg,
					// })
				}


			},
		}
	}
</script>

<style>
	.content {
		padding-top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.home {
		width: 750rpx;
		height: 737rpx;
		position: relative;
	}

	.home-text {
		font-weight: bold;
		font-size: 42rpx;
		color: #FFFFFF;
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.home-img {
		width: 231rpx;
		height: 231rpx;
		margin: 0 auto;
		margin-top: -115rpx;
	}

	.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 1);
	}

	.reader {
		width: 100%;
		/* width: 100vw;
		height: 100vh; */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>